<div class="container">
    <div class="row">
        <div class="col-12">
            <h2>Video player</h2>
            
            <div class="videogular-container">
                <videogular ng-repeat="config in ctrl.videoConfigs" vg-theme="config.theme" vg-loop="config.loop" vg-auto-play="true">
                    <vg-media vg-src="config.sources" vg-preload="'none'"></vg-media>

                    <vg-controls vg-autohide="config.autoHide" vg-autohide-time="config.autoHideTime">
                        <vg-play-pause-button></vg-play-pause-button>
                        <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
                        <vg-scrub-bar>
                            <vg-scrub-bar-buffer></vg-scrub-bar-buffer>
                            <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                        </vg-scrub-bar>
                        <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
                        <vg-volume>
                            <vg-mute-button></vg-mute-button>
                            <vg-volume-bar></vg-volume-bar>
                        </vg-volume>
                        <vg-fullscreen-button></vg-fullscreen-button>
                    </vg-controls>

                    <vg-poster vg-url='config.plugins.poster.url'></vg-poster>
                    <vg-buffering></vg-buffering>
                    <vg-overlay-play></vg-overlay-play>
                </videogular>
            </div>
        </div>
    </div>
</div>
